"use client"

import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cn } from '@/lib/utils';
import { 
  Users, 
  ShieldCheck, 
  Building2, 
  Train, 
  Lock, 
  FileText,
  Key,
  History
} from 'lucide-react';

interface SideNavItem {
  title: string;
  href: string;
  icon: React.ReactNode;
}

const navItems: SideNavItem[] = [
  {
    title: "用户管理",
    href: "/admin/users",
    icon: <Users className="w-5 h-5" />,
  },
  {
    title: "角色管理",
    href: "/admin/roles",
    icon: <ShieldCheck className="w-5 h-5" />,
  },
  {
    title: "部门管理",
    href: "/admin/departments",
    icon: <Building2 className="w-5 h-5" />,
  },
  {
    title: "股道管理",
    href: "/admin/tracks",
    icon: <Train className="w-5 h-5" />,
  },
  {
    title: "锁具管理",
    href: "/admin/locks",
    icon: <Key className="w-5 h-5" />,
  },
  {
    title: "开锁记录",
    href: "/admin/lock-records",
    icon: <History className="w-5 h-5" />,
  },
  {
    title: "门禁管理",
    href: "/admin/access",
    icon: <Lock className="w-5 h-5" />,
  },
  {
    title: "典型票管理",
    href: "/admin/templates",
    icon: <FileText className="w-5 h-5" />,
  },
];

export function AdminSideNav() {
  const pathname = usePathname();
  
  return (
    <div className="w-64 bg-white border-r border-border h-full">
      <div className="py-4">
        <div className="px-4 py-2 mb-6">
          <h2 className="text-lg font-semibold text-foreground">系统管理</h2>
          <p className="text-sm text-muted-foreground">管理用户、角色和系统设置</p>
        </div>
        
        <nav className="space-y-1 px-2">
          {navItems.map((item) => {
            const isActive = pathname === item.href || pathname.startsWith(`${item.href}/`);
            
            return (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  "flex items-center gap-3 rounded-lg px-3 py-2 transition-all",
                  isActive 
                    ? "bg-secondary text-primary border-l-4 border-primary font-medium" 
                    : "text-muted-foreground hover:bg-secondary/50 hover:text-foreground"
                )}
              >
                {item.icon}
                {item.title}
              </Link>
            );
          })}
        </nav>
      </div>
    </div>
  );
}

export default AdminSideNav; 